<style>
    #upload_blackAndWhite_frame .upload-file {
        position:absolute;
        top:0;
        left:0;
        right:0;
        bottom:0;
        background:#e9e9e9;
    }
    #upload_blackAndWhite_frame .file-frame {
        position:absolute;
        width:90%;
        height:128px;
        top:20px;
        left:50%;
        margin-left:-45%;
        background:#0dc8ff;
        border-radius:4px;
        color:#fff;
        font-size:16px;
        box-shadow:0px -5px 35px #a4daff;
        text-align:center;
    }
    #upload_blackAndWhite_frame .upload-log {
        position:absolute;
        top:140px;
        left:0;
        right:0;
        bottom:0;
        background:#fff;
    }
    #upload_blackAndWhite_frame #upload-file-button {
        position:absolute;
        left:50%;
        margin-left:-45px;
        bottom:15px;
        width:90px;
        color:#ffffff;
        padding:5px 0px;
        text-align:center;
        background:transparent;
        border:2px solid #ffffff;
        border-radius:3px;
        outline:none;
        transition:all ease .2s;
    }
    #upload_blackAndWhite_frame #upload-file-button:hover {
        color:#000000;
        background:#ffffff;
    }
    #upload_blackAndWhite_frame #upload-file-button:active {
        box-shadow:2px 2px 10px #ccc inset;
    }
    #upload_blackAndWhite_frame .upload-log {
        position:relative;
        padding-top:40px;
        text-align:center;
    }
    #upload_blackAndWhite_frame .upload-log:after {
        position: absolute;
        top:15px;
        width: 40px;
        height: 5px;
        background: #e9e9e9;
        content: ' ';
        left:50%;
        margin-left:-20px;
        border-radius:10px;
    }
    #upload_blackAndWhite_frame .upload-log > label {
        margin:0 20px;
    }
    #upload_blackAndWhite_frame .upload-log-table {
        width:100%;

        height:360px;
        overflow-y: auto;
        margin-top:10px;
        border-top:1px solid #eee;
        border-bottom:1px solid #eee;
    }
    #upload_blackAndWhite_frame .res-success {
        position:relative;
        color:lightseagreen;
    }
    #upload_blackAndWhite_frame .res-success:before {
        position:absolute;
        top:6px;
        left:-15px;
        content:' ';
        width:10px;
        height:10px;
        border-radius:10px;
        background:lightseagreen;
    }
    #upload_blackAndWhite_frame .res-false {
        position:relative;
        color:#e26b1d;
    }
    #upload_blackAndWhite_frame .res-false:before {
        position:absolute;
        top:6px;
        left:-15px;
        content:' ';
        width:10px;
        height:10px;
        border-radius:10px;
        background:#e26b1d;
    }
    #upload_blackAndWhite_frame #file-address {
        margin-top:15px;
        font-size:16px;
        font-family:'microsoft yahei';
        font-weight:normal;
        color: #ffffff !important;
    }
    #upload_blackAndWhite_frame #upload-pro {
        position:absolute;
        left:50%;
        margin-left:-45px;
        border:none;
        bottom:15px;
        width:94px;
        height:19px;
        background:transparent;
        padding:5px 0px;
        text-align:center;
        border-radius:3px;
        outline:none;
    }
    #upload_blackAndWhite_frame #upload-pro-ed {
        position:absolute;
        top:0;
        bottom:0;
        left:0;
        width:0%;
        transition:all ease .2s;
        background:#21aaff;
        border-radius: 3px;
    }
    #upload_blackAndWhite_frame .change-upload-pro {
        background:#ffffff;
        animation:changeUploadPro 1s ease forwards;
    }
    @keyframes changeUploadPro {
        0% {height:19px;width:94px;margin-left:-45px;background:#fff;}
        30% {height:4px;padding:0;width:94px;margin-left:-45px;background:#fff;}
        90% {height:4px;width:98%;margin-left:-49%;padding:0;background:#fff;}
        100% {height:4px;width:90%;margin-left:-45%;padding:0;background:#fff;}
    }
    .change-upload-pro-go {
        background:#fff;
        animation:changeUploadProGo 1s ease forwards;
    }
    @keyframes changeUploadProGo {
        0% {height:4px;width:90%;margin-left:-45%;padding:0;background:#fff;}
        10% {height:4px;width:98%;margin-left:-49%;padding:0;background:#fff;}
        70% {height:4px;padding:0;width:94px;margin-left:-45px;background:#fff;}
        85% {height:12px;width:94px;margin-left:-45px;background:rgba(255, 255, 255, .5);}
        120% {height:19px;width:94px;margin-left:-45px;background:transparent;}
    }
    #upload_blackAndWhite_frame .upload-pro-ed-notify {
        position:absolute;
        right:-25px;
        height:24px;
        min-width:50px;
        bottom:10px;
        color:#000;
        font-size:12px;
        border-radius:3px;
        background:url('images/pro-ed-notify.png') center no-repeat;
        background-size:cover;
        display:none;
    }
    #upload_blackAndWhite_frame table {
        border:none;
        width:100%;
    }
    #upload_blackAndWhite_frame table tr {
        border-bottom:1px solid #e9e9e9;
        height: 30px;
    }
</style>

<article id="upload_blackAndWhite_frame">
    <div class="upload-file">
        <form enctype="multipart/form-data">
            <div class="file-frame">
                <h1 id="file-address">请选择文件</h1>
                <input type="file" name="upload-file" style="display:none" />
                <div id="upload-pro">
                    <div id="upload-pro-ed"><div class="upload-pro-ed-notify">0%</div></div>
                </div>
                <button type="button" id="upload-file-button">上传</button>
            </div>
            <div class="upload-log">
                <div class="choice-permission" style="margin-bottom: 10px;">
                    <label>特殊名单类型：</label>
                    <select name="dataType" id="dataType">
                    </select>
                     <label>是否占用车位：</label>
                    <select name="takeUpSpace" id="takeUpSpace">
                    </select>
                </div>
                <label class="res-success" id="input-success-vehicle">导入车辆：<span>0</span></label>
                <div class="upload-log-table">
                    <table>
                        <thead>
                        <tr>
                            <th style="text-align: left; padding:0 15px;">失败文件清单&nbsp;<label style="float:right">错误条数：<span id="false-row">0</span></label></th>
                        </tr>
                        </thead>
                        <tbody></tbody>
                    </table>
                </div>
            </div>
        </form>
    </div>
</article>
<script>
    	//下拉列表框
	$('#upload_blackAndWhite_frame #dataType').html();
	$(Utils.getModelArrayByParentModelKey(BASIS.SPECIAL_TYPE.ROOT)).each(function(){
		$('#upload_blackAndWhite_frame #dataType').append('<option value="'+$(this)[0].modelValue+'">'+$(this)[0].modelName+'</option>');
	});
	$('#upload_blackAndWhite_frame #takeUpSpace').html();
	$(Utils.getModelArrayByParentModelKey(BASIS.BOTT_LEVEL_ROOT.ROOT)).each(function(){
		$('#upload_blackAndWhite_frame #takeUpSpace').append('<option value="'+$(this)[0].modelValue+'">'+$(this)[0].modelName+'</option>');
	});
    $('#upload_blackAndWhite_frame #file-address').bind('click', function(event) {
        $('#upload_blackAndWhite_frame [type="file"]').click();
    });
    $('#upload_blackAndWhite_frame [type="file"]').bind('change', function(event) {
        if (this.files.length == 0) {
            $('#upload_blackAndWhite_frame #file-address').html('请选择文件');
        } else {
            $('#upload_blackAndWhite_frame #file-address').html(this.value);
        }
    });
    $('#upload_blackAndWhite_frame #upload-file-button').bind('click', function() {
        if ($('#upload_blackAndWhite_frame [type="file"]')[0].files.length == 0) {
            notification({'title':'提示', 'message':'请先选择要上传的文件'},'info');
            return;
        } else {
            $(this).hide();
            var uploadBtn = $(this);
            $('#upload_blackAndWhite_frame #upload-pro').addClass('change-upload-pro');
            setTimeout(function() {
                $('#upload_blackAndWhite_frame .upload-pro-ed-notify').show(250);
            },1200);
            setTimeout(function() {
                var data = new FormData($('#upload_blackAndWhite_frame form')[0]);
                var xhr = new XMLHttpRequest();
                xhr.upload.onprogress = function(e){
                    var pro = e.loaded / e.total;
                    $('#upload_blackAndWhite_frame .upload-pro-ed-notify').html(pro*100+'%');
                    $('#upload_blackAndWhite_frame #upload-pro-ed').css({'width':pro*100+'%'});
                    if (pro == 1) {
                        $('#upload_blackAndWhite_frame .upload-pro-ed-notify').html('导入中..');
                    }
                }
                xhr.onload = function(e){
                    var res = JSON.parse(e.srcElement.responseText);
                    if (res.isOk == 0) {
                        notification({'title':'错误', 'message':res.msg},'error');
                    } else {
                        setTimeout(function() {
                            $('#upload_blackAndWhite_frame .upload-pro-ed-notify').html('完成');
                        },500);
                        var totalCount = res['total'];
                        var falseCount = res['false'];
                        var successVehicle = res['successVehicle'];
                        $('#upload_blackAndWhite_frame #input-success-vehicle span').html(successVehicle);
                        $('#upload_blackAndWhite_frame #false-row').html(falseCount);
                        var list = res['falseList'];
                        $('#upload_blackAndWhite_frame .upload-log-table table tbody').html('');
                        for (var i = 0; i < list.length; i++) {
                            var tr =$('<tr></tr>');
                            tr.html('<td style="text-align: left">'+list[i]+'已经存在</td>');
                            $('#upload_blackAndWhite_frame .upload-log-table table tbody').append(tr);
                        }
                    }
                    $('#upload_blackAndWhite_frame .upload-pro-ed-notify').hide(250);
                    $('#upload_blackAndWhite_frame #upload-pro').removeClass('change-upload-pro');
                    $('#upload_blackAndWhite_frame #upload-pro').addClass('change-upload-pro-go');
                    $('#upload_blackAndWhite_frame #upload-pro-ed').css({'width':'0px'});
                    setTimeout(function(){
                        uploadBtn.show();
                        $('#upload_organization_frame #upload-pro').css({'background':'transparent'});
                    },1000)
                }
                xhr.open('post', baseApiPath + 'blackAndWhite/upload', true);
                xhr.send(data);
            }, 1250);
        }
    });
</script>